 /**
 * 炼焦大数据智能诊断系统 - 时间线JavaScript文件
 */

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 显示加载动画
  createLoadingSpinner('timeline-chart');
  
  // 生成时间线图表
  setTimeout(() => {
      renderTimelineChart();
  }, 500);
});

/**
* 渲染项目时间线图表
*/
function renderTimelineChart() {
  const container = document.getElementById('timeline-chart');
  if (!container) return;
  
  // 项目时间线数据
  const timelineData = [
      {
          phase: '第一个月',
          tasks: [
              '完成数据采集与清洗流程',
              '建立基础探索性分析框架',
              '开发数据质量监控模块'
          ],
          milestone: '数据准备阶段完成',
          color: '#4285f4'
      },
      {
          phase: '第二个月',
          tasks: [
              '完成统计建模基础模型',
              '实现炉号对比分析功能',
              '开发周期性能分析模块'
          ],
          milestone: '探索性数据分析完成',
          color: '#34a853'
      },
      {
          phase: '第三个月',
          tasks: [
              '实现机器学习预测模型',
              '开发异常检测模型',
              '完成温度曲线分析功能'
          ],
          milestone: '统计建模与预测完成',
          color: '#fbbc05'
      },
      {
          phase: '第四个月',
          tasks: [
              '实现深度学习模型',
              '完成多目标优化系统',
              '开发模型解释性功能'
          ],
          milestone: '机器学习模型开发完成',
          color: '#ea4335'
      },
      {
          phase: '第五个月',
          tasks: [
              '整合各模型形成完整分析链',
              '开发交互式分析仪表板',
              '完成自动化报告系统'
          ],
          milestone: '高级分析与应用完成',
          color: '#673ab7'
      },
      {
          phase: '第六个月',
          tasks: [
              '系统测试与调优',
              '用户培训与文档编写',
              '系统部署与上线'
          ],
          milestone: '项目完成',
          color: '#009688'
      }
  ];
  
  // 使用Mermaid绘制甘特图
  const ganttChart = `
  <div class="mermaid">
  gantt
      dateFormat  YYYY-MM-DD
      title 炼焦大数据智能诊断系统项目时间线
      excludes weekends
      
      section 数据准备阶段
      数据采集与整理 :a1, 2023-01-01, 14d
      数据清洗 :a2, after a1, 10d
      特征工程 :a3, after a2, 10d
      数据存储与管理 :a4, after a3, 7d
      
      section 探索性数据分析
      单变量分析 :b1, after a4, 10d
      多变量分析 :b2, after b1, 10d
      炉号对比分析 :b3, after b1, 10d
      周期分析 :b4, after b2, 10d
      
      section 统计建模与预测
      多元回归分析 :c1, after b4, 14d
      时间序列分析 :c2, after c1, 14d
      多变量时间序列分析 :c3, after c2, 14d
      
      section 机器学习模型开发
      监督学习模型 :d1, after c3, 14d
      无监督学习模型 :d2, after d1, 10d
      深度学习模型 :d3, after d2, 14d
      模型集成与优化 :d4, after d3, 10d
      
      section 高级分析与应用
      多变量动态关系分析 :e1, after d4, 10d
      多目标优化 :e2, after e1, 10d
      知识图谱构建 :e3, after e1, 10d
      解释性模型与可视化 :e4, after e2, 10d
      
      section 持续优化与评估
      模型监控与更新 :f1, after e4, 10d
      A/B测试 :f2, after f1, 10d
      分析报告与建议生成 :f3, after f2, 10d
  </div>
  `;
  
  // 设置容器内容
  container.innerHTML = ganttChart;
  
  // 重新渲染Mermaid图表
  mermaid.init(undefined, container.querySelector('.mermaid'));
  
  // 添加详细时间线
  setTimeout(() => {
      renderDetailedTimeline(timelineData);
  }, 1000);
}

/**
* 渲染详细时间线
* @param {Array} timelineData - 时间线数据
*/
function renderDetailedTimeline(timelineData) {
  const container = document.getElementById('timeline-chart');
  if (!container) return;
  
  // 创建详细时间线容器
  const timelineContainer = document.createElement('div');
  timelineContainer.className = 'detailed-timeline mt-5';
  
  // 创建时间线HTML
  let timelineHTML = `
      <h3 class="text-center mb-4">项目里程碑</h3>
      <div class="timeline-container">
  `;
  
  // 添加每个阶段
  timelineData.forEach((item, index) => {
      timelineHTML += `
          <div class="row timeline-item" style="border-left-color: ${item.color}">
              <div class="col-md-3">
                  <h5>${item.phase}</h5>
              </div>
              <div class="col-md-9">
                  <h6>${item.milestone}</h6>
                  <ul>
                      ${item.tasks.map(task => `<li>${task}</li>`).join('')}
                  </ul>
              </div>
          </div>
      `;
  });
  
  timelineHTML += `</div>`;
  
  // 添加到容器
  timelineContainer.innerHTML = timelineHTML;
  container.appendChild(timelineContainer);
  
  // 添加交互效果
  addTimelineInteractions();
}

/**
* 为时间线添加交互效果
*/
function addTimelineInteractions() {
  // 获取所有时间线项
  const timelineItems = document.querySelectorAll('.timeline-item');
  
  timelineItems.forEach(item => {
      // 添加鼠标悬停效果
      item.addEventListener('mouseover', function() {
          this.style.transform = 'translateX(5px)';
          this.style.boxShadow = '0 5px 15px rgba(0,0,0,0.1)';
          this.style.transition = 'all 0.3s ease';
      });
      
      item.addEventListener('mouseout', function() {
          this.style.transform = 'translateX(0)';
          this.style.boxShadow = 'none';
      });
  });
  
  // 为甘特图添加交互
  const ganttTasks = document.querySelectorAll('.mermaid .task');
  
  ganttTasks.forEach(task => {
      task.style.cursor = 'pointer';
      
      // 添加点击事件
      task.addEventListener('click', function() {
          const taskText = this.textContent.trim();
          showTaskDetails(taskText);
      });
  });
}

/**
* 显示任务详细信息
* @param {string} taskText - 任务文本
*/
function showTaskDetails(taskText) {
  // 任务详细信息
  const taskDetails = {
      '数据采集与整理': {
          title: '数据采集与整理',
          duration: '14天',
          description: '从各种数据源收集原始数据并进行初步整理。',
          deliverables: [
              '数据采集接口',
              '数据字典',
              '自动化采集脚本'
          ]
      },
      '数据清洗': {
          title: '数据清洗',
          duration: '10天',
          description: '处理原始数据中的缺失值、异常值和格式问题。',
          deliverables: [
              '数据清洗流程文档',
              '清洗后的数据集',
              '异常值处理报告'
          ]
      },
      '特征工程': {
          title: '特征工程',
          duration: '10天',
          description: '从原始数据中提取和构建有价值的特征。',
          deliverables: [
              '特征提取模块',
              '特征重要性分析报告',
              '特征工程文档'
          ]
      },
      '深度学习模型': {
          title: '深度学习模型',
          duration: '14天',
          description: '使用深度学习技术处理复杂数据和模式。',
          deliverables: [
              'LSTM温度曲线预测模型',
              '自编码器异常检测模型',
              'CNN特征提取模型',
              '模型性能评估报告'
          ]
      }
  };
  
  // 获取任务详细信息
  const details = taskDetails[taskText] || {
      title: taskText,
      description: '项目时间线中的重要任务。'
  };
  
  // 创建详细信息HTML
  let detailsHTML = `
      <h5>${details.title}</h5>
      <p>${details.description}</p>
  `;
  
  // 添加持续时间（如果有）
  if (details.duration) {
      detailsHTML += `<p><strong>预计时间：</strong>${details.duration}</p>`;
  }
  
  // 添加交付物列表（如果有）
  if (details.deliverables && details.deliverables.length > 0) {
      detailsHTML += `
          <h6>主要交付物：</h6>
          <ul>
              ${details.deliverables.map(item => `<li>${item}</li>`).join('')}
          </ul>
      `;
  }
  
  // 创建模态框显示详细信息
  const modalId = 'taskDetailModal';
  let modal = document.getElementById(modalId);
  
  // 如果模态框不存在，则创建
  if (!modal) {
      const modalDiv = document.createElement('div');
      modalDiv.innerHTML = `
          <div class="modal fade" id="${modalId}" tabindex="-1" aria-hidden="true">
              <div class="modal-dialog">
                  <div class="modal-content">
                      <div class="modal-header">
                          <h5 class="modal-title">任务详情</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body" id="${modalId}-body">
                      </div>
                  </div>
              </div>
          </div>
      `;
      document.body.appendChild(modalDiv);
      modal = document.getElementById(modalId);
  }
  
  // 设置模态框内容
  document.getElementById(`${modalId}-body`).innerHTML = detailsHTML;
  
  // 显示模态框
  const bsModal = new bootstrap.Modal(modal);
  bsModal.show();
}